import React, { useEffect, useState, useContext } from 'react';
import { Link } from 'react-router-dom';
import { Message, Card, Modal, Input, Button, Row, Col, Space } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import classnames from 'classnames';

import styles from './style.module.scss';

import WebsiteName from 'components/WebsiteName';
import Navigate from 'components/Navigate';
import Beian from 'components/Beian';
import CardInfomation, { AddCard } from 'components/CardInfomation';
import Editer from './editer/index';
import ViewPass from './viewPass';
import ViewMore from './viewMore';
import ImportFile from './importFile';
import ListTableStyle from './listTableStyle';
import BatchDelte from './batchDelete';

import service from 'service'
import Home, { HomeContext } from './context';

const { confirm } = Modal;


export default () => {
    // const { ImportFileButton, ImportFileModal } = ImportFile();
    const value = Home();
    const {
        type,
        getLabels,
        getList,
        searchText, setSearchText,
        listStyle,
        addHandle,

        selectedRowKeys,
        showBatchDeleteRowHandle, showBatchDeleteRowHandleCancel, showBatchDeleteHandle,
    } = value;

    // 编辑-取消回调
    const editOnCancel = () => {
        console.log('editer 点击关闭')
    }
    // 编辑-成功回调
    const editOnOk = () => {
        console.log('editer 执行成功回调')
        // getList()
    }

    const ListStyleEle = {
        'card': CardInfomation,

    }[listStyle];



    const [width, setWidth] = useState('100%');
    useEffect(() => {
        // let size = '';
        // let clientWidth = document.body.clientWidth;
        // let count = Math.floor(clientWidth / 296);
        // setWidth(count * 296)
    }, [])
    useEffect(() => {
        getLabels()
    }, [])
    useEffect(() => {
        getList()
    }, [])

    return (
        <HomeContext.Provider value={value}>
            <div className={styles.wrapper}>
                <div className={styles.header}>
                    <div className={styles.spaceBetween}>
                        <div className={styles.title}>
                            <WebsiteName />
                        </div>
                        <div className={styles.extra}>
                            <Navigate />
                        </div>
                    </div>
                </div>
                <div className={styles.navBar}>
                    <div className={styles.spaceBetween}>
                        <div className={styles.title}>
                            <Button type="link">卡片</Button>
                            <Button type="link">表格</Button>
                            <Button type="link">列表</Button>
                        </div>
                        <div className={styles.extra}>
                            <Space>
                                <Input.Search
                                    placeholder="输入关键字检索"
                                    style={{ width: 240 }}
                                    value={searchText}
                                    onChange={(e) => setSearchText(e.target.value)}
                                    onSearch={setSearchText} />
                                <Button type="primary" onClick={addHandle}>添加</Button>
                                <Link to="/batchAdd"><Button type="primary">批量添加</Button></Link>
                                <ImportFile />
                                {
                                    type === 'batchDelete'
                                        ? (
                                            selectedRowKeys.length
                                                ? <Button type="danger" onClick={showBatchDeleteHandle}>批量删除</Button>
                                                : <Button type="danger" onClick={showBatchDeleteRowHandleCancel}>批量删除</Button>
                                        )
                                        : <Button type="danger" onClick={showBatchDeleteRowHandle}>批量删除</Button>
                                }

                            </Space>
                        </div>
                    </div>
                </div>
                <div className={classnames(styles.content)}>
                    {/* <div className={styles.frame}> */}
                    {/* <AddCard onClick={(e) =>  style={{ margin: '0 auto', width: width }}
                            editHandle(true, 'add', null)} /> */}
                    <ListTableStyle />
                    {/* {
                            list.map((item, i) =>
                                <ListStyleEle
                                    key={i}
                                    data={item}
                                    onEdit={(e) => editHandle(true, 'edit', item)}
                                    onViewPass={(e) => viewPassHandle(true, item)}
                                    onDelete={(e) => deleteHandle(item)}
                                    onViewMore={(e) => viewMoreHandle(true, item)}
                                />
                            )} */}
                    {/* </div> */}
                </div>
                <div className={classnames(styles.footer)}>
                    <Beian />
                </div>
                <Editer
                    onCancel={editOnCancel}
                    onOk={editOnOk}
                />
                <ViewPass />
                <ViewMore />
                <BatchDelte />
            </div >
        </HomeContext.Provider >
    )
}